<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>%UNITY_WEB_NAME%</title>
    <style>
        html,
        body {
            height: 100%;
            background-color: #333;
        }

        .nav-item {
            word-break: keep-all;
        }
    </style>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="js/config.js"></script>
    <script src="TemplateData/UnityProgress.js"></script>
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <script>
        var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {
            compatibilityCheck: function (gameInstance, onsuccess, onerror) {
                if (!UnityLoader.SystemInfo.hasWebGL) {
                    gameInstance.popup("Your browser does not support WebGL",
                        [{
                            text: "OK",
                            callback: onerror
                        }]);
                } else if (UnityLoader.SystemInfo.mobile) {
                    gameInstance.popup(
                        "Please note that Unity WebGL is not currently supported on mobiles. Press OK if you wish to continue anyway.",
                        [{
                            text: "OK",
                            callback: onsuccess
                        }]);
                } else if (["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) === -1) {
                    gameInstance.popup(
                        "Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.",
                        [{
                            text: "OK",
                            callback: onsuccess
                        }]);
                } else {
                    onsuccess();
                }
            },
            onProgress: UnityProgress
        });

        let token;

        window.onload = function () {

            let reg = new RegExp("(^|&)" + 'ticket' + "=([^&]*)(&|$)");

            let ticket = window.location.search.substr(1).match(reg);

            if (ticket == null)
                return;

            ticket = unescape(ticket[2]);

            if (getCookie('dis') !== '' && getCookie('iLab_token') !== '') {
                // 如果ticket相同，则不重新获取
                if (getCookie('ticket') === ticket) return;

                clearCookie();
            }

            let ajax;

            if (window.XMLHttpRequest) {

                ajax = new XMLHttpRequest();

            } else ajax = new ActiveXObject("Microsoft.XMLHTTP");

            ajax.open('post', transmit_url + '/tickets?appid=%UNITY_CUSTOM_APPID%&ticket=' + encodeURIComponent(ticket), true);

            ajax.onreadystatechange = function () {

                if (ajax.readyState === 4 && ajax.status === 200) {

                    let response = ajax.responseText;

                    let jsonObject = JSON.parse(response);

                    if (jsonObject.code !== 0) {
                        alert(tip_reenter);
                        return;
                    }

                    document.cookie = 'dis=' + jsonObject['dis'];

                    document.cookie = 'iLab_token=' + jsonObject['token'];

                    document.cookie = 'ticket=' + ticket;

                }
            }

            ajax.timeout = timeout;

            ajax.ontimeout = function () {
                ajax.dispose();

                alert(tip_timeout);
            }

            ajax.send();
        }

        function getCookie(parameter) {
            let reg = new RegExp("(^| )" + parameter + "=([^;]*)(;|$)", "gi");

            let result = reg.exec(document.cookie);

            if (result)
                return result[2];

            return "";
        }
    </script>
</head>

<body class="h-100 overflow-hidden" onresize="resize_canvas()" onpageshow="resize_canvas()">
<nav class="navbar navbar-expand navbar-dark bg-dark ">
    <span class="navbar-brand" href="#">%UNITY_WEB_NAME%</span>
    <ul class="navbar-nav mr-auto">
    </ul>
    <ul class="navbar-nav ml-auto">
        <li class="d-none nav-item active" id="name-item">
        <span class="nav-link" id="username">
          用户：
        </span>
        </li>
        <li class="d-none nav-item active ml-1" id="logout">
            <button type="button" class="btn btn-primary" onclick="logoutOnclick()">登出</button>
        </li>
        <li class="nav-item active ml-1">
            <button type="button" class="btn btn-primary" onclick="gameInstance.SetFullscreen(1)">全屏</button>
        </li>
    </ul>
</nav>
<div class="webgl-content w-100 h-auto overflow-hidden">
    <div id="gameContainer" class="mx-auto"></div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    function resize_canvas() {
        var canvas = document.getElementsByTagName('canvas')[0];
        var s = AutoSize(parseInt("1280", 10), parseInt("720", 10),
            $("body").width(), $("body").height() - $("nav").height() - 20)
        canvas.width = s.width;
        canvas.height = s.height;
        $("#gameContainer").width(canvas.width);
        $("#gameContainer").height(canvas.height);
    }

    function AutoSize(ratioWidth, ratioHeight, maxWidth, maxHeight) {
        var w = maxWidth;
        var h = maxHeight;
        if (maxWidth / maxHeight <= ratioWidth / ratioHeight) {
            w = maxWidth;
            h = maxWidth * (ratioHeight / ratioWidth);
        } else {
            w = maxHeight * (ratioWidth / ratioHeight);
            h = maxHeight;
        }
        return {
            width: w,
            height: h
        };
    }

    function updateUsername() {
        if (document.getElementById("username").innerHTML == "") {
            $("#name-item").addClass("d-none");
            $("#logout").addClass("d-none");
        } else {
            $("#name-item").removeClass("d-none");
            $("#logout").removeClass("d-none");
        }
    }

    function logoutOnclick() {
        clearCookie();

        var currentURL = window.location.href;
        url = currentURL.split('?')[0];
        window.history.pushState({}, "0", url);
        location.reload();
    }

    function clearCookie() {
        document.cookie = "dis=;expires=" + new Date().toUTCString();
        document.cookie = "iLab_token=;expires=" + new Date().toUTCString();
        document.cookie = "ticket=;expires=" + new Date().toUTCString();
    }
</script>
</body>

</html>